<template>
	<el-card
		class="list"
		v-if="list"
		:body-style="{ display: 'flex', flexDirection: 'column', height: '100%' }"
	>
		<div class="header-filter-btn">
			<div class="flex-a">
				<span>题目筛选</span>
				<el-button-group>
					<el-button size="mini" :type="topicFilter === 'all' ? 'primary' : 'default'" @click="topicFilterMethod('all')">全部题</el-button>
					<el-button size="mini" :type="topicFilter === 'pt' ? 'primary' : 'default'" @click="topicFilterMethod('pt')">普通题</el-button>
					<el-button size="mini" :type="topicFilter === 'tp' ? 'primary' : 'default'" @click="topicFilterMethod('tp')">图片题</el-button>
					<el-button size="mini" :type="topicFilter === 'sp' ? 'primary' : 'default'" @click="topicFilterMethod('sp')">视频题</el-button>
				</el-button-group>
			</div>
		</div>
		<div class="export-group flex-a">
			<span>当前 {{ list.list ? list.list.length : 0 }} 题</span>
		</div>
		<el-divider class="shrink-0">说明</el-divider>
		<div class="explain">
			<el-button disabled size="mini" type="primary">当前题</el-button>
			<el-button disabled size="mini">普通题</el-button>
			<el-button disabled size="mini" type="warning" plain>图片题（已经过机器匹配）</el-button>
			<el-button disabled size="mini" type="danger" plain>图片题（机器匹配失败）</el-button>
			<el-button disabled size="mini" type="success" plain>图片题（已经过人工确认，或更改过、上传图片）</el-button>
			<el-button disabled size="mini" type="info">视频题</el-button>
			<div style="margin-top: 10px; width: 100%; text-align: left">
				显示题号
				<el-switch
					v-model="showId"
					active-color="#13ce66"
					inactive-color="#ff4949"
				>
				</el-switch>
			</div>
		</div>
		<el-divider class="shrink-0">题号列表</el-divider>
		<div class="button-list-group">
			<el-button
				class="btn"
				v-for="(item, index) in list.list"
				:type="buttonStateFilter(index, item)"
				:plain="curIndex === index ? false : item.mediaType === 1"
				:key="index"
				size="small"
				v-show="(topicFilter === 'pt' && item.mediaType === 0) || (topicFilter === 'tp' && item.mediaType === 1) || (topicFilter === 'sp' && item.mediaType === 2) || topicFilter === 'all'"
				@click="clickCurItem(index)"
			>
				{{showId ? item._id : `第${index+1}题`}}
			</el-button>
		</div>
	</el-card>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
	name: 'laList',
	props: ['curIndex', 'list'],
	setup (props, context) {
		const showId = ref(true)
		const topicFilter = ref('all')
		const clickCurItem = index => {
			context.emit('curItem', index)
		}

		const buttonStateFilter = (index, item) => {
			if (props.curIndex === index) {
				return 'primary'
			}
			switch (item.mediaType) {
				case 0:
					return 'default'
				case 1:
					if (item.isUserChange || item.confirmation) {
						return 'success'
					}
					if (item.isChangeImg) {
						return 'warning'
					}
					return 'danger'
				case 2:
					return 'info'
			}
		}

		const topicFilterMethod = (val) => {
			topicFilter.value = val
			context.emit('topicFilter', val)
		}

		return {
			showId,
			topicFilter,
			buttonStateFilter,
			clickCurItem,
			topicFilterMethod
		}
	}
})
</script>

<style scoped lang="scss">
	.list{
		height: 100%;
		& > div {
			height: 100%;
		}
		.header-filter-btn {
			flex-shrink: 0;
			margin-bottom: 10px;
		}
		.explain{
			text-align: center;
			>span{ margin-right: 10px;}
			margin-bottom: 13px;
		}
		.button-list-group {
			flex-grow: 1;
			overflow-y: auto;
		}
		.btn {
			width: 80px;
			margin: 6px;
		}
	}
	.shrink-0 {
		flex-shrink: 0
	}
</style>
<style lang="scss">
.list {
	.el-card {
		height: 100%;
	}
}
</style>
